<template>
<div>
  <div>我们要学习setup函数了</div>
  <div>{{obj}}</div>
  <button @click="changeStr">changStr</button>
</div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
   console.log('setup')
   console.log(this)
  //  1. setup需要返回值 ,返回值了模板才能用
  // 2.默认的值不是响应式的,需要用reactive()
   const obj = reactive({
    name: '曹扬',
    age: 16,
    str: '她在装嫩,老妖婆'
   })
  // const obj = {
  //   name: '曹扬',
  //   age: 16,
  //   str: '她在装嫩,老妖婆'
  //  }
   const changeStr = () => {
    obj.str = '她没在装嫩,就是美少女!'
    console.log(obj.str)
   }
   return {
    obj,
    changeStr
   }
  }
}
</script>
